<template>
  <div :id="id" class="echarts"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "columnarChart",
  components: {},
  props:{
    id: {
      type: String,
      default: 'echarts'
    },
    legendData: {
      type: Array,
      default: function () {
        return []
      }
    },
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      lineCharts:null,
    };
  },
  mounted () {},
  methods: {
    getEcharts(){
      let that=this;
      if(!that.lineCharts){
        var chartDom = document.getElementById(that.id);
        that.lineCharts = echarts.init(chartDom);
      }else{
        that.lineCharts.clear();
      }
      var option;
      option = {
        tooltip:{
          // trigger:'axis',
          axisPointer:{
            type:'cross'
          }
        },
        xAxis: {
          type: 'category',
          data: that.legendData,
          axisLabel: {
            color: '#A1A7B3',
            interval:0,
            rotate:-30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: that.dataList,
            type: 'bar',
            tooltip:{
              valueFormatter:function(value){
                return value+'人'
              }
            },
            label: { 
              show: true,
              position: 'inside' 
            },
          }
        ]
      }
      option && that.lineCharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts{
  width: 100%;
  height:400px;
  background-color:#ffffff;
}
</style>
